<template>
 	<a-row>
 		<h2  v-if='data.supOrBuyer==1'  class='color-blue  text-underline'><router-link  :to='{path:"/supplier/detail",query:{code:data.code}}'>{{data.name}}</router-link></h2>
 		<h2  v-else-if='data.supOrBuyer==2'  class='color-blue  text-underline'><router-link  to='/buyer'>{{data.name}}</router-link></h2>
 		<h2  v-else>{{data.name}}</h2>
 		<table  width="100%"  class='mt32  infoTable'>
 			<tr>
 				<td  >			 <span  class="color-grey">客户类型 ： </span>{{data.supOrBuyer | customType}}</td>
 				
 				<td  width="33%"><span  class="color-grey">客户邮箱 ： </span>{{data.email}}</td>
 				<td  width="33%"><span  class="color-grey">网址 ： </span>{{data.website}}</td>
 			</tr>
 			<tr>
 				<td  >			 <span  class="color-grey">客户电话 ： </span>{{data.phone}}</td>
 				
 			</tr>
 			<tr>
 				<td colspan="2"><span  class="color-grey">其他 ： </span><div   style='line-height:1.5;margin-left: 50px;margin-top: -33px;'>{{data.remark}}</div></td>
 			</tr>
 		</table>
 		<div  class='text-right'>
 			<span  class="color-grey">录入人：</span>{{data.createUserName}}<br/>
 			<span  class="color-grey">录入时间：</span>{{data.createTime | formatDate}}
 		</div>
 		<a-divider/>

 		<div  class='mt32'>联系记录 ：
 				<a-button  type="dashed"  @click="showApproateRecForm()"  class='mb28'><a-icon type="plus-circle" />添加</a-button>
		      	
		      	<a-timeline>
				    <a-timeline-item  v-for='(item,index) in  talkRecord'  :key='index'  :class='{activeRecord:item.code == currentRecordCode}'>
				    	<a-icon  v-if='item.code == currentRecordCode' slot="dot" type="pushpin" style="font-size: 16px;color:blue" />
				    	<span  class='inline-block w100 text-right'>日期：</span>{{item.clientDate | formatDates}}<br>
				    	<span  class='inline-block w100 text-right'>联系人：</span>{{item.contact}}<br>
				    	<span  class='inline-block w100 text-right'>联系电话：</span>{{item.phone}}<br>

				    	<span  class='inline-block w100 text-right '>备注：</span><div  class='tipdiv'  v-html='item.remark'></div>
				    	<span  class='ft12'><span  class='inline-block w100 text-right  mt6'>记录人：</span>{{item.createUserName}}<br></span>
				    	<span  class='ft12'><span  class='inline-block w100 text-right'>记录时间：</span>{{item.createTime | formatDate}}</span>
				    	<!-- 记录对应编辑和删除 -->
				    	<span  class='fr  pr20'>
				    		<a-button                shape="circle" icon="edit"    class='pl20'  @click='editcurrentRec(item.code)'/>
				    		<a-popconfirm title="确认删除当前数据？" @confirm="confirmDel(item.code)"   okText="确认" cancelText="取消">
							    <a-button type="danger"  shape="circle" icon="delete"               />
							</a-popconfirm>
				    	</span>
				    	<a-divider/>
				    </a-timeline-item>
				   
				  </a-timeline>
		      
		      </a-form-item>
 		</div>
    	<approateRec   ref='approateRecForm'  :visible="visible" :entCode='currentEntCode' v-on:handleCancel='visible=false'  v-on:handleOk='handleOk(arguments)'></approateRec>
    	
 	</a-row>
</template>

<script>
/*约谈model form组件*/
import approateRec  from '@/components/customer/approateRec'
import  { DetailEnt,ContactList,delContact  }  from  '@/api/customer/index'
export default {
  name: 'customerInfo',
  data () {
    return {
    	/*基础*/
    	currentEntCode:'',//根据企业code 获得详情
    	data:{},//详情data
      	talkRecord:[],//联系记录列表
      	/*子组件*/
      	visible: false,/*联系记录录入弹框显示与否*/
      	/*其他页面访问*/
      	currentRecordCode:'',//从具体的联系记录点入链接 当前高亮
    }
  },
  created(){
  	this.currentEntCode = this.$route.query.code
  	/*其他页面访问*/
  	if(this.$route.query.recordCode){
  		this.currentRecordCode = this.$route.query.recordCode
  	}
  	this.pageInit()
  	this.contactList()
  },
  computed: {

  },
  methods:{
		async pageInit(){
  			await DetailEnt(this.currentEntCode).then((res)=>{
  				this.data = res.data.data
  			})
  		},
		contactList(){
  			ContactList({entCode:this.currentEntCode}).then((res)=>{
  				if(res.data.flag == true){
  					this.talkRecord = res.data.dataList
  				}
  			})
  		},

		/*保存联系记录*/
		handleOk(arg){
			this.$message.success(arg[0])
			this.contactList()
			this.visible = false
		},
		editcurrentRec(code){
			this.$refs.approateRecForm.$emit('editDialog',code)
			this.visible = true
		},
		confirmDel(code){
			delContact(code).then((res)=>{
				if(res.data.flag == true){
					this.$message.success(res.data.msg)
					this.contactList()
				}
			})
		},

		/*弹框显示隐藏*/
		showApproateRecForm(){
			this.$refs.approateRecForm.$emit('openDialog',this.currentEntCode)
			this.visible = true
	    },
		
  },
  components:{
  	approateRec
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	/*客户维护记录*/
.tipdiv{margin-left: 100px;margin-top: -20px;min-height: 20px;}
/*详情展示*/
.infoTable{line-height: 45px;}

.activeRecord{padding-top:20px;box-shadow: 4px 4px 7px #d0cccc;border:2px dotted #1890ff;margin-bottom: 20px;}

</style>
